{% comment %}
    Renders facets (filtering and sorting)

    Accepts:
    - results: {Object} Collection or Search object

    Usage:
    {% render 'facets', results: search %}
{% endcomment %}

{%- liquid
  assign sort_by = results.sort_by | default: results.default_sort_by
  assign total_active_values = 0
  if results.url
    assign results_url = results.url
  else 
    assign terms = results.terms | escape
    assign results_url = '?q=' | append: terms | append: '&type=article%2Cproduct%2Cpage&options%5Bprefix%5D=last&sort_by=' | append: sort_by
  endif
  
  assign enable_sorting = settings.show_sort_by
-%}

{%- liquid
  assign total_active_filter_values = 0
  for filter in results.filters
    assign total_active_filter_values = total_active_filter_values | plus: filter.active_values.size
  endfor
-%}

<div class="container facets-container">
  <facet-filters-form class="facets small-hide d-none d-lg-block">
    <form id="FacetFiltersForm" class="facets-form as-facets-form">
      {%- if results.terms -%}
        <input type="hidden" name="q" value="{{ results.terms | escape }}">
        <input name="options[prefix]" type="hidden" value="last">
        <input type="hidden" name="type" value="product,article,page"/>
      {%- endif -%}

      {%- comment -%}filter{%- endcomment -%}
      <div class="facets-wrapper as-facets-wrapper me-4 me-md-8">
        {%- unless results.filters == empty -%}
          <h2 class="facets-header">{{ 'products.facets.filter_by_label' | t }}</h2>
        {%- endunless -%}
        {%- for filter in results.filters -%}
          {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
          {%- case filter.type -%}
            {%- when 'list' -%}
              <div class="facets-disclosure js-filter" data-index="{{ forloop.index }}">
                <div class="dropdown-toggle facets-toggle" id="filter-dropdown-{{ filter.label | escape }}-{{ forloop.index }}" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  <span class="facets-name">{{ filter.label | escape }}</span>
                  <span>{%- render 'icon-chevron-down' -%}</span>
                </div>
                <div class="dropdown-menu facets-menu" aria-labelledby="filter-dropdown-{{ filter.label | escape }}-{{ forloop.index }}">
                    {%- for value in filter.values -%}
                      <label for="Filter-{{ filter.label | escape }}-{{ forloop.index }}" class="facets-item d-flex justify-content-between {% if value.count == 0 and value.active == false %}disabled{% endif %}">
                        <div class="d-flex">
                          <input class="form-check-input me-2 flex-shrink-0"
                            name="{{ value.param_name }}"
                            value="{{ value.value }}"
                            type="checkbox"
                            id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
                            {% if value.active %}checked{% endif %}
                            {% if value.count == 0 and value.active == false %}disabled{% endif %}
                            >
                          {{ value.label | escape }}
                        </div>
                        <span class="facets-item-count">
                          {{ value.count }}
                        </span>
                      </label>
                    {%- endfor -%}
                </div>
              </div>
          {%- endcase -%}
        {%- endfor -%}
      </div>

      {% if results.filters.size > 0 %}
      <div class="active-facets as-active-facets">
        {%- for filter in results.filters -%}
          {%- for value in filter.active_values -%}
            <facet-remove>
              <a {% if value.url_to_remove contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ value.url_to_remove }}" class="active-facets-item d-inline-block w-100">
                <div class="d-inline-block">
                  {{ value.label | escape }}
                  {% render 'icon-close' %}
                </div>
              </a>
            </facet-remove>
          {%- endfor -%}
        {%- endfor -%}
        <facet-remove>
          <a {% if results_url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ results_url }}" class="facets-clear">
            <span>{{ 'products.facets.clear_all' | t }}</span>
            <span class="as-active-filter-count">{% if total_active_filter_values > 0 %}({{ total_active_filter_values }}){% endif %}</span>
          </a>
        </facet-remove>
      </div>
      {% endif %}

      {% if results.current_vendor or results.current_type %}
        <input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
      {% endif %}

      {%- if enable_sorting -%}
        <div class="sorting">
          <h2 class="facets-header">
            <label for="sortBy">{{ 'products.facets.sort_by_label' | t }}</label>
          </h2>
          <select class="form-select" name="sort_by" id="sortBy">
            {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
            {%- for option in results.sort_options -%}
              <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
            {%- endfor -%}
          </select>
        </div>
      {%- endif -%}

      <div class="as-product-count facets-count facets-count-pc">
        {% paginate search.results by 100000000 %}
          {% assign count = search.results | where: 'object_type', 'product' %}
        {% endpaginate %}
    
        {%- if count.size -%}
          {{ 'products.facets.results_with_count' | t: count: count.size }}
        {%- endif -%}
      </div>

    </form>
  </facet-filters-form>
  <div class="search-drawer-mob d-lg-none">
    <facet-filters-form>
      <form id="FacetFiltersFormMob" action="" class="as-facets-form-mob">
        <div class="d-flex justify-content-between gx-4">
          <a class="text-decoration-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSearch" aria-controls="offcanvasSearch" href="">
            {% render 'icon-filter' %}
            <span>{{ 'products.facets.filter_and_sort_button' | t }}</span>{% if total_active_filter_values > 0 %}<span class="as-active-filter-count">({{ total_active_filter_values }})</span>{% endif %}
          </a>
          <div class="as-product-count-mob facets-count">
            {% paginate search.results by 100000000 %}
              {% assign count = search.results | where: 'object_type', 'product' %}
            {% endpaginate %}
            {%- if count.size -%}
              {{ 'products.facets.results_with_count' | t: count: count.size }}
            {%- endif -%}
          </div>
        </div>
        <div class="offcanvas offcanvas-end d-lg-none" tabindex="-1" id="offcanvasSearch" aria-labelledby="offcanvasSearchLabel">
          <div class="offcanvas-header">
            <a class="btn p-0 border-0" data-bs-dismiss="offcanvas" aria-label="Close">
              {% render 'icon-close' %}
            </a>
            <facet-remove>
              <a href="{{ results_url }}" class="facets-clear">
                <span>{{ 'products.facets.clear_all' | t }}</span>
              </a>
            </facet-remove>
          </div>
          <div class="offcanvas-body">
            {%- if enable_sorting -%}
                <div class="sorting d-flex justify-content-between">
                  <h2 class="facets-header-mob mb-0">
                    <label for="sortBy">{{ 'products.facets.sort_by_label' | t }}</label>
                  </h2>
                  <select class="form-select" name="sort_by" id="sortBy">
                    {%- assign sort_by = results.sort_by | default: results.default_sort_by -%}
                    {%- for option in results.sort_options -%}
                      <option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
                    {%- endfor -%}
                  </select>
                </div>
                <hr>
            {%- endif -%} 
            
            {% assign list_filters = results.filters | where: 'type', 'list' %}
            {%- for filter in list_filters -%}
                <div class="js-filter facets-collapse-mob" data-index="mob-{{ forloop.index }}">
                  <div class="facets-header-mob d-flex justify-content-between collapse-toggle as-collapse-toggle"  data-bs-toggle="collapse" data-bs-target="#Collapse-{{ forloop.index }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="panelsStayOpen-collapseOne">
                    <span>{{ filter.label | escape }}</span>
                    <span>{% render 'icon-chevron-down' %}</span>
                  </div>
                  <ul id="Collapse-{{ forloop.index }}" class="facets-menu list-unstyled mb-0 collapse as-collapse-content {% if forloop.first %}show{% endif %}">
                    {%- for value in filter.values -%}
                      <li>
                        <label class="facets-item d-flex justify-content-between {% if value.count == 0 and value.active == false %}disabled{% endif %}">
                          <div class="d-flex">
                            <input class="form-check-input me-2 flex-shrink-0"
                              name="{{ value.param_name }}"
                              value="{{ value.value }}"
                              type="checkbox"
                              id="Filter-{{ filter.label | escape }}-{{ forloop.index }}"
                              {% if value.active %}checked{% endif %}
                              {% if value.count == 0 and value.active == false %}disabled{% endif %}
                              >
                            {{ value.label | escape }}
                          </div>
                          <span class="facets-item-count">
                            {{ value.count }}
                          </span>
                        </label>
                      </li>
                    {%- endfor -%}
                  </ul>
                </div>
              {%- unless forloop.last -%}
                <hr>
              {%- endunless -%}
            {%- endfor -%}
          </div>
          <div class="offcanvas-footer border-top">
            <div class="container">
              <a class="as-product-count-button btn btn-primary w-100" data-bs-dismiss="offcanvas" aria-label="Close">
                {% paginate search.results by 100000000 %}
                  {% assign count = search.results | where: 'object_type', 'product' %}
                {% endpaginate %}
                {%- if count.size -%}
                  {% if total_active_filter_values > 0 %}
                    {{ 'products.facets.results_with_active_filter' | t: count: total_active_filter_values }} {{ 'products.facets.results_with_count' | t: count: count.size }}
                  {% else %}
                    {{ 'products.facets.results_with_count' | t: count: count.size }}
                  {% endif %}
                {% endif %}
              </a>
            </div>
          </div>
        </div>
        {% if results.current_vendor or results.current_type %}
            <input type="hidden" name="q" value="{{ results.current_vendor }}{{ results.current_type }}">
          {% endif %}
        {%- if results.terms -%}
          <input type="hidden" name="q" value="{{ results.terms | escape }}">
          <input name="options[prefix]" type="hidden" value="last">
          <input type="hidden" name="type" value="product,article,page"/>
        {%- endif -%}
        {% if results.filters.size > 0 %}
          <div class="active-facets as-active-facets-mob">
            {%- for filter in results.filters -%}
              {%- for value in filter.active_values -%}
                <facet-remove>
                  <a {% if value.url_to_remove contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ value.url_to_remove }}" class="active-facets-item d-inline-block w-100">
                    <div class="d-inline-block">
                      {{ value.label | escape }}
                      {% render 'icon-close' %}
                    </div>
                  </a>
                </facet-remove>
              {%- endfor -%}
            {%- endfor -%}
            <facet-remove>
              <a {% if results_url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ results_url }}" class="facets-clear">
                <span>{{ 'products.facets.clear_all' | t }}</span>
                <span class="as-active-filter-count">{% if total_active_filter_values > 0 %}({{ total_active_filter_values }}){% endif %}</span>
              </a>
            </facet-remove>
          </div>
        {% endif %}
      </form>
    </facet-filters-form>
  </div>
</div>